<template>
  <div id="clue_enroll" class="dialog animated" :class="open? 'fadeIn':'fadeOut'" v-show="show">
    <div class="panel animated" :class="open? 'zoomIn':''">
      <choose v-show="step==1" ref="choose" @ok="chooseOk" @cancel="cancel"></choose>
      <confirm v-show="step==2" ref="confirm" @ok="confirmOk" @cancel="cancel" @back="backChoose"></confirm>
      <pay v-show="step==3" ref="pay" @ok="payOk" @back="backConfirm"></pay>
      <success v-show="step==4" ref="success" @ok="successOk"></success>
    </div>
  </div>
</template>

<script>
import choose from "./clue_enroll_choose";
import confirm from "./clue_enroll_confirm";
import pay from "./clue_enroll_pay";
import success from "./clue_enroll_success";

var vm;
export default {
  components: {
    choose,
    confirm,
    success,
    pay
  },
  data: function() {
    return {
      show: false,
      open: false,
      step: 1,
      clue: null
    };
  },
  methods: {
    init: function(clue) {
      vm.show = true;
      vm.open = true;
      vm.step = 1;
      vm.clue = clue;

      vm.$refs.choose.init(clue);
    },
    cancel: function() {
      //隐藏弹窗
      vm.open = false;
      setTimeout(function() {
        vm.show = false;
        vm.step = 0;
      }, 500);
    },
    chooseOk: function(countList) {
      vm.step = 2;
      vm.$refs.confirm.init(vm.clue, countList);
    },
    confirmOk: function(countList, info) {
      //当支付方式为支付宝或者微信时，进入二维码支付页面
      if (info.orderPayState == 1) {
        vm.step = 3;
        vm.$refs.pay.init(vm.clue, countList, info);
        vm.$emit("callback");
      } else {
        //反之进入报名成功页面
        vm.step = 4;
        vm.$refs.success.init(vm.clue, countList, info);
        vm.$emit("callback");
      }
    },
    payOk: function(countList, info) {
      vm.step = 4;
      vm.$refs.success.init(vm.clue, countList, info);
      vm.$emit("callback");
    },
    backChoose: function() {
      vm.step = 1;
    },
    backConfirm: function() {
      vm.step = 2;
    },
    successOk: function() {
      vm.cancel();
    },
    refrestData: function() {
      //刷新父组件
      if (vm.$parent.initData) vm.$parent.initData();
    }
  },
  created: function() {
    vm = this;
  }
};
</script>
<style lang="scss">
#clue_enroll {
  .el-input__inner {
    border-radius: 0.1rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }
}
</style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped>
.panel {
  margin-top: 0.6rem;
  /*width: 12.44rem;*/
}
</style>